<template>
  <div class="SeconderyUser">
    <div class="msg">队员</div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        loading-text="加载中..."
        finished-text="没有更多数据了~"
        @load="onLoad"
        style="background: #ffffff"
        :immediate-check="false"
        :offset="10"
      >
        <div class="list_per">
          <ul class="user_item" v-for="(item, index) in list" :key="index">
            <li class="item_name">
              <div>
                <img :src="item.avatar | imageUrl" alt="" />
              </div>
              <div>
                <h5>{{ item.nick }}</h5>
                <span style="color: #999; font-size: 0.24px">{{
                  getTime(item.createTime)
                }}</span>
              </div>
            </li>

            <li class="info">
              <ul>
                <li class="list_per">
                  {{ item.money }}
                </li>
                <router-link
                  tag="li"
                  :to="'/account_details?id=' + item.accountId"
                  >明细</router-link
                >
              </ul>
            </li>
          </ul>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { formatDate } from "@/utils/filters";
export default {
  data() {
    return {
      list: [],
      pageNumber: 1,
      pageSize: 10,
      loading: false,
      finished: true,
      isLoading: false,
      imgUrl: "https://xueyizhi.oss-cn-shenzhen.aliyuncs.com/",
    };
  },
  created() {
    this.getTeamList();
  },
  methods: {
    getTime(time) {
      return formatDate(time);
    },
    //刷新
    onRefresh() {
      this.isLoading = true;
      this.list = [];
      this.pageNumber = 1;
      this.getTeamList();
    },
    //分页
    onLoad() {
      this.loading = true;
      this.pageNumber += 1;
      this.getTeamList();
    },
    //获取团队列表
    getTeamList() {
      let _self = this;
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中",
      });
      this.$Api
        .getTeamList({
          pageNumber: this.pageNumber,
          pageSize: this.pageSize,
          accountId: this.$store.state.userInfo
            ? this.$store.state.userInfo.id
            : "",
          series: 2,
          parentId: this.$route.query.id,
        })
        .then((res) => {
          if (res.code == 1) {
            _self.$toast.clear();
            _self.list = _self.list.concat(res.data.list);
            _self.finished = res.data.lastPage;
            _self.loading = false;
            _self.isLoading = false;
          }
        });
    },
  },
};
</script>

<style scoped>
.SeconderyUser {
  background: #f8f8f8;
}
.SeconderyUser .msg {
  background: #f8f8f8;
  height: 83px;
  padding-left: 27px;
}
.user_item {
  padding: 38px 18px;
  display: flex;
  align-items: center;
  border-bottom: 1px #e7e7e7 solid;
  background: #fff;
}
.user_item img {
  width: 70px;
  height: 70px;
  border-radius: 100%;
  border: 1px #ccc solid;
  margin-right: 14px;
}
.user_item .item_name {
  display: flex;
  align-items: center;
  flex: 1;
}
.user_item .list_per {
  color: #ff9a22;
  text-align: left;
  width: 33%;
}
.info {
  flex: 1;
}
.info ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info ul li {
  text-align: center;
}
.info ul a {
  color: #333;
  text-align: center;
}
</style>